<template>
  <div class="taskAction z-h-100">
    <div class="taskAction-header">
      <filterSelect class="mt-right-10" @change="change" />
      <portalSelectTree
        :data="fiterTreeData"
        width="200"
        :value="value"
        :props="props"
        size="mini"
        filterable
        placeholder="请选择任务类型"
        @change="treeChange"
      />
    </div>
    <treeTable :table-data="treeData" @changeFun="changeFun" />
  </div>
</template>

<script>
import filterSelect from '@/components/filterSelect'
import { mapGetters } from 'vuex'
import { getTaskTreeList, saveStatus } from '@/api/portalTaskUi/taskAction'
import treeTable from './components/treeTable'
import portalSelectTree from '@/components/portalSelectTree'
import { getTenantId } from '@/api/portalTaskUi/taskList'
export default {
  name: 'TaskAction',
  components: {
    filterSelect,
    treeTable,
    portalSelectTree
  },
  data() {
    return {
      treeData: [],
      fiterTreeData: [], // 搜索树的数据
      loading: false,
      value: [],
      props: {
        label: 'nodeName'
      },
      currentId: ''
    }
  },
  computed: {
    ...mapGetters(['user'])
  },

  async created() {
    const data = await this.getTenantIdFun() // 获取用户id
    this.currentId = data.id
    this.$store.commit('setUser', data)
    const params = {
      tenantId: this.currentId
    }
    this.getTaskTreeListFun(params)
  },

  methods: {
    // 获取用户身份
    getTenantIdFun() {
      return new Promise(resolve => {
        getTenantId().then(res => {
          resolve(res.data.data)
        })
      })
    },
    findRelationArr(arr1, id) {
      var temp = []
      var forFn = function(arr, id) {
        for (var i = 0; i < arr.length; i++) {
          var item = arr[i]
          if (item.nodeId === id) {
            temp.push(item)
            forFn(arr1, item.pid)
            break
          } else {
            if (item.children) {
              forFn(item.children, id)
            }
          }
        }
      }
      forFn(arr1, id)
      return temp[temp.length - 1]
    },
    // 搜索树改变
    treeChange(value) {
      console.log(value)
      // let data = [
      //   {id: 1, pid: "", children: [{id: 2, pid: 1, children: [{id: 3, pid: 2}]}]}
      // ];
      // console.log(this.findRelationArr(data, 3));
      if (value.length > 0) {
        const target = value[0].nodeId
        // console.log(this.fiterTreeData);
        console.log(this.findRelationArr(this.fiterTreeData, target))
        this.treeData = [this.findRelationArr(this.fiterTreeData, target)]
      } else {
        this.treeData = this.fiterTreeData
      }
      // let target = value[0].
      // this.treeData =
    },
    // 点击某行改变属性
    changeFun(row) {
      row.taskTypeId = row.nodeId
      const params = {
        tenantId: this.currentId
      }
      const data = Object.assign(params, row)
      saveStatus(data).then(res => {
        // console.log(res);
        if (res.data.code === 0) {
          this.$message({
            message: res.data.msg || '操作成功!',
            type: 'success'
          })
          const params = {
            tenantId: this.currentId
          }
          this.getTaskTreeListFun(params)
        }
      })
    },
    // 头部发生改变
    change(value) {
      const params = {
        tenantId: value
      }
      this.currentId = value
      this.getTaskTreeListFun(params)
    },
    getTaskTreeListFun(params) {
      this.loading = true
      getTaskTreeList(params).then(res => {
        // console.log(res);
        if (res.data.code === 0) {
          this.treeData = res.data.data
          this.fiterTreeData = res.data.data
        }
        this.loading = false
      })
    }
  }
}
</script>

<style lang="less" scoped>

.taskAction{
  padding:10px;
  background-color:#fff;
}
  .taskAction-header{
    // width:220px;
    margin-bottom: 10px;
    display:flex;
  }
  .taskAction-tree{
    height: calc(100% - 28px - 10px);
  }
</style>
